<template>
  <a-modal
    :width="'990px'"
    :title="modalTitle"
    :visible="visible"
    unmount-on-close
    okText="确认"
    cancel-text="关闭"
    @cancel="close"
    :on-before-ok="onSubmit"
  >
    <page-form :model="form" ref="formRef" layout="vertical" gutter="0" :rules="rules">
      <page-form-item
        field="templateId"
        :hide-asterisk="true"
        label="选择车型价格模板"
        size="1"
        :validate-trigger="[]"
        style="margin-bottom: 6px"
      >
        <!-- 单个反写价格 -->
        <template v-if="operateType == 'single'">
          <a-radio :default-checked="true">{{ form.templateName }}</a-radio>
        </template>
        <!-- 批量反写价格 -->
        <template v-else>
          <div class="batch-select-box">
            <a-radio-group class="radio-group" v-model="form.templateType" @change="onTemplateTypeChange">
              <a-radio :value="1">系统模板</a-radio>
              <a-radio :value="2">自创模板</a-radio>
            </a-radio-group>
            <remote-select
              :disabled="form.templateType == 1"
              class="template-select"
              v-model="form.idList"
              placeholder="请选择"
              type="sOrderPriceTemplateList"
              @change="onTemplateIdListChange"
            />
          </div>
        </template>
      </page-form-item>
      <page-form-item field="priceTypeList" label="反写的价格类型" size="1" style="margin-bottom: 6px">
        <a-checkbox-group v-model="form.priceTypeList">
          <a-checkbox :value="item.value" v-for="(item, index) in priceTypeDictList" :key="index">{{ item.label }}</a-checkbox>
        </a-checkbox-group>
      </page-form-item>
      <page-form-item field="sourceIdList" label="反写的渠道" size="1" style="margin-bottom: 6px">
        <a-checkbox-group v-model="form.sourceIdList">
          <a-checkbox :value="item.value" v-for="(item, index) in dict.thirdpartySourceEnum" :key="index">{{ item.label }}</a-checkbox>
        </a-checkbox-group>
      </page-form-item>
      <div class="attention-tips">
        <div class="attention-title">提示：<span class="text-red">（请仔细阅读）</span></div>
        <div class="attention-p">1、渠道未开启，或账号登录失败，则不支持反写。</div>
        <div class="attention-p">2、门店及车型未在启程完成匹配，则反写失败。</div>
        <div class="attention-p">3、价格设置为0元时，默认不反写。</div>
        <div class="attention-p">4、反写【平日价及周末价】时，需都设定金额后才支持反写，如只设定了平日价或周末价，则反写失败。</div>
        <div class="attention-p">5、时间存在重叠时携程、哈啰、飞猪价格取值规则为：节假日价格 > 自定义价格 > 周末价 > 平日价。</div>
        <div class="attention-p">6、时间存在重叠时悟空价格取值规则为：自定义价格 > 平日价。</div>
        <div class="attention-p bold">【携程反写注意事项】</div>
        <div class="attention-p">反写自定义价格时，会根据反写的信息将携程中的自定义价格覆盖。</div>
        <div class="attention-p bold">【飞猪反写注意事项】</div>
        <div class="attention-p">反写自定义价格时，会根据反写的信息将飞猪中的自定义价格覆盖。</div>
        <div class="attention-p bold">【悟空反写注意事项】</div>
        <div class="attention-p"
          >悟空设置价格的方式为自定义配置，每次反写将覆盖之前的数据，如先反写节假日价，再反写周末价，则节假日选择的时间内周末的时间会被周末价
          覆盖，建议反写时反写所有价格类型或全部使用自定义价格进行反写，防止覆盖导致的错误。</div
        >
      </div>
    </page-form>
  </a-modal>
</template>

<script setup name="TemplateSiteModal">
  import { Message } from '@arco-design/web-vue'
  import { getTemplateSelectList, syncToOta } from '@/api/business/price.js'
  import { ref } from 'vue'
  import { usePageDict } from '@/hooks/useDict'
  const visible = ref(false)
  const modalTitle = ref('')
  const form = ref({
    id: '',
  })
  const templateInfo = ref({})
  // 单个反写价格 or 批量反写价格
  const operateType = ref('single')
  // 价格类型字典
  const priceTypeDictList = [
    { label: '平日及周末', value: 1 },
    { label: '手续费', value: 2 },
    { label: '节假日', value: 3 },
    { label: '自定义价格', value: 4 },
  ]
  const validatorTemplateId = (_, callback) => {
    if (operateType.value == 'single') {
      callback()
    } else {
      // 如果选择的是系统模板
      if (form.value.templateType == 1) {
        callback()
      } else {
        // 如果选择的是自定义模板
        if (form.value.idList?.length > 0) {
          callback()
        } else {
          callback('请选择自创模板')
        }
      }
    }
  }
  // remoteSelect change 事件
  const onTemplateIdListChange = () => {
    formRef.value.validateField('templateId')
  }
  // 批量反写价格，模板类型切换到系统模板，清空提示语
  const onTemplateTypeChange = (value) => {
    if (value == 1) {
      formRef.value.clearValidate('templateId')
    }
  }
  // form rules
  const rules = {
    templateId: [{ required: true, validator: validatorTemplateId }],
    priceTypeList: { required: true, message: '请选择反写的价格类型' },
    sourceIdList: { required: true, message: '请选择反写的渠道' },
  }
  const dict = ref({})
  const open = (type, record) => {
    visible.value = true
    operateType.value = type
    // 查询条件
    dict.value = usePageDict('tenantPriceDict', false, (pageDict) => {
      // 反写的渠道 默认值
      const thirdpartySourceEnum = pageDict.thirdpartySourceEnum || []
      form.value.sourceIdList = thirdpartySourceEnum.map((item) => item.value)
    })
    // 默认选中 “平日及周末”、“手续费”
    form.value.priceTypeList = [1, 2]
    if (type == 'single') {
      templateInfo.value = record
      modalTitle.value = '一键反写价格'
      // 一键反写价格，传入 id 字段
      form.value.id = record.id
      form.value.templateId = record.id
      form.value.templateName = record.templateName
    } else {
      delete form.value.id
      form.value.templateType = 1
      modalTitle.value = '批量反写价格'
      // 获取短租系统模板 id
      const param = {
        templateSort: 1, // 模板类别（1短租、2长租）
        templateType: 1, // 模板类型 (1系统、2自定义)
        status: 1, // 模板状态（1启用，2禁用）
      }
      getTemplateSelectList(param).then((res) => {
        const result = res.result
        if (result?.length > 0) {
          // 系统模板
          const sysTemplate = result[0]
          // 系统模板id
          form.value.id = sysTemplate.id
        }
      })
    }
  }
  const close = () => {
    visible.value = false
    form.value = {}
  }
  const formRef = ref(null)
  const onSubmit = (done) => {
    formRef.value.validate((error) => {
      if (error) {
        console.log(error)
        done(false)
      } else {
        const param = {
          priceTypeList: form.value.priceTypeList,
          sourceIdList: form.value.sourceIdList,
        }
        if (operateType.value == 'single') {
          param.id = form.value.id
        } else {
          // 如果选择的是系统模板，此时给 id 赋值
          if (form.value.templateType == 1) {
            param.id = form.value.id
          } else {
            param.idList = form.value.idList
          }
        }
        syncToOta(param)
          .then((res) => {
            if (res.code == 200) {
              Message.success('操作成功')
              close()
              done(true)
            } else {
              Message.error(res.msg)
              done(false)
            }
          })
          .catch(() => {
            done(false)
          })
      }
    })
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .batch-select-box {
    display: flex;
    align-items: center;
    .radio-group {
    }
    .template-select {
      width: 280px;
    }
  }
  .attention-tips {
    padding: 20px;
    background: #f7f8fa;
    .attention-title {
      font-weight: 600;
      font-size: 16px;
      color: #1d2129;
      line-height: 24px;
      margin-bottom: 11px;
      .text-red {
        font-size: 12px;
      }
    }
    .attention-p {
      font-size: 14px;
      color: #1d2129;
      line-height: 22px;
    }
    .attention-p + .attention-p {
      margin-top: 4px;
    }
    .attention-p.bold {
      font-weight: 600;
      margin-top: 8px;
    }
    .text-red {
      color: #f53f3fff;
    }
  }
</style>
